import React, {Component} from 'react';
import {Card, List, Icon, Button} from 'antd'
import {LeftOutlined} from '@ant-design/icons'
// import {Redirect, Route, Switch} from 'react-router-dom';

class Detail extends Component {
    //返回
    back=()=>{
        this.props.history.goBack()
        // route.back()
    }
    render() {
        console.log(this.props,this.props.location.state)
        const {productName,description,price,category}=this.props.location.state
        const title = (
            <span>
                <Button type='text' onClick={this.back}><LeftOutlined style={{color:'green',fontSize:20}}/></Button>
                <span  style={{marginLeft:10}}>商品详情</span>

            </span>
        )

        return (
            <Card title={title}>
                <List>
                    <List.Item style={{display:"flex",justifyContent:'flex-start'}}>
                        <span>商品名称:</span>
                        <span style={{marginLeft:10}}>{productName}</span>
                    </List.Item>
                    <List.Item style={{display:"flex",justifyContent:'flex-start'}}>
                        <span>商品描述:</span>
                        <span style={{marginLeft:10}}>{description}</span>
                    </List.Item>
                    <List.Item style={{display:"flex",justifyContent:'flex-start'}}>
                        <span>商品价格:</span>
                        <span style={{marginLeft:10}}>{price}</span>
                    </List.Item>
                    <List.Item style={{display:"flex",justifyContent:'flex-start'}}>
                        <span>所属分类:</span>
                        <span style={{marginLeft:10}}>{category}</span>
                    </List.Item>
                </List>
            </Card>
        );
    }
}

export default Detail;